<template>
  <view class="friends-list">
    <view>
      <view class="_list-top">
        <view class="_list-top-option">
          <view class="_list-top-option-icon">
            <image
              class="_icon"
              src="@/static/img/contacts/news-friend-icon.png"
            ></image>
          </view>
          <view class="_list-top-option-text"><text>新的朋友</text></view>
        </view>
        <view class="_list-top-option">
          <view class="_list-top-option-icon">
            <image
              class="_icon"
              src="@/static/img/contacts/group-chat-icon.png"
            ></image>
          </view>
          <view class="_list-top-option-text"><text>群聊</text></view>
        </view>
      </view>
      <view class="list-content" :style="{ height: mainHeight - 116 + 'px' }">
        <scroll-view
          class="scroll-y"
          :scroll-y="true"
          @scroll="listScroll"
          :scroll-into-view="listScrollIntoView"
        >
          <view
            class="list-item"
            v-for="(item, index) in indexList"
            :key="index"
            :id="'list-' + item"
          >
            <view class="list-item-tag"
              ><text>{{ item }}</text></view
            >
            <view class="list-item-content">
              <view
                class="list-cell"
                v-for="(cell, idx) in itemArr[index]"
                :key="idx"
              >
                <view class="_cell-avatar">
                  <image
                    class="_avatar-img"
                    src="@/static/img/chat/pic.jpg"
                  ></image>
                </view>
                <view class="_cell-content"
                  ><text>{{ cell }}</text></view
                >
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="list-anchor">
          <view
            class="list-anchor-item"
            v-for="(item, index) in indexList"
            :key="index"
            :class="{ 'list-anchor-item-active': listScrollAnchor == item }"
            @tap="listAnchorClick(item)"
            ><text>{{ item }}</text></view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, getCurrentInstance, onMounted } from "vue";

// 获取父组件传过来的值
const props = defineProps(["mainHeight"]);
let mainHeight = ref(0);

watch(
  props,
  (newValue, oldValue) => {
    mainHeight.value = newValue.mainHeight;
    console.log("mainHeight", mainHeight.value);
  },
  { immediate: true }
);

// 获取页面实例对象
const instance = getCurrentInstance();
const query = uni.createSelectorQuery().in(instance);

// 创建响应式数据
const indexList = ref(["A", "B", "C"]);
const itemArr = ref([
  [
    "列表A1",
    "列表A2",
    "列表A3",
    "列表A4",
    "列表A5",
    "列表A6",
    "列表A7",
    "列表A8",
    "列表A9",
  ],
  [
    "列表B1",
    "列表B2",
    "列表B3",
    "列表B4",
    "列表B5",
    "列表B6",
    "列表B7",
    "列表B8",
    "列表B9",
    "列表B10",
  ],
  [
    "列表C1",
    "列表C2",
    "列表C3",
    "列表C4",
    "列表C5",
    "列表C6",
    "列表C7",
    "列表C8",
    "列表C9",
    "列表C10",
  ],
]);

onMounted(() => {
  getListIndexHeight();
});

// 获取滚动区每个索引块元素的top值  -281是除去页面head等的高度
const indexListHeight = ref([]);
async function getListIndexHeight() {
  for (let i = 0; i < indexList.value.length; i++) {
    let res = await awaitGetListIndexHeight(`${indexList.value[i]}`);
    // console.log("得到布局位置信息", indexList.value[i], res);
    indexListHeight.value.push({
      index: indexList.value[i],
      top: res.top - 281,
    });
  }
  // console.log("indexListHeight", indexListHeight.value);
}

function awaitGetListIndexHeight(element) {
  return new Promise((resolve) => {
    query
      .select(`#list-${element}`)
      .boundingClientRect((data) => resolve(data))
      .exec();
  });
}

// 滚动区滚动监听及锚点联动
const listScrollAnchor = ref("");
listScrollAnchor.value = indexList.value[0];
function listScroll(e) {
  // console.log("e", e.detail.scrollTop);
  for (let i = 0; i < indexListHeight.value.length; i++) {
    // console.log("indexListHeight.value[i]", indexListHeight.value[i].index);
    if (indexListHeight.value[i + 1]) {
      if (
        e.detail.scrollTop >= indexListHeight.value[i].top &&
        e.detail.scrollTop < indexListHeight.value[i + 1].top
      ) {
        listScrollAnchor.value = indexListHeight.value[i].index;
      }
    } else {
      if (e.detail.scrollTop >= indexListHeight.value[i].top) {
        listScrollAnchor.value = indexListHeight.value[i].index;
      }
    }
  }
}

// 定义索引块 scroll-into-view
const listScrollIntoView = ref("");
// 点击锚点联动索引块
function listAnchorClick(item) {
  listScrollIntoView.value = `list-${item}`;
}
</script>

<style lang="scss" scoped>
._list-top {
  width: 100%;
  box-sizing: border-box;
  padding: 18rpx 26rpx;

  ._list-top-option {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 18rpx;

    ._list-top-option-icon {
      width: 80rpx;
      height: 80rpx;

      ._icon {
        width: 100%;
        height: 100%;
      }
    }

    ._list-top-option-text {
      font-size: 30rpx;
      color: #1c1c1c;
      font-weight: 500;
      margin-left: 28rpx;
      width: calc(100% - 108rpx);
      height: 80rpx;
      display: flex;
      align-items: center;
      position: relative;

      ::after {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #f6f6f6;
        position: absolute;
        bottom: -14rpx;
        left: 0;
      }
    }
  }

  ._list-top-option:last-child {
    ._list-top-option-text {
      ::after {
        display: none;
      }
    }
  }
}

.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  ._cell-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 8rpx;

    ._avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
  }

  ._cell-content {
    width: calc(100% - 108rpx);
    height: 80rpx;
    margin-left: 28rpx;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 30rpx;
    color: #1c1c1c;
    font-weight: 500;

    ::after {
      content: "";
      width: 100%;
      height: 1px;
      background-color: #f6f6f6;
      position: absolute;
      bottom: -14rpx;
      left: 0;
    }
  }
}

.list-cell:last-child {
  ._cell-content {
    ::after {
      display: none;
    }
  }
}

.list-content {
  width: 100%;
  position: relative;

  .scroll-y {
    width: 100%;
    height: 100%;

    .list-item {
      width: 100%;

      .list-item-tag {
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        color: #9e9e9e;
        background-color: #f2f2f2;
        padding-left: 24rpx;
        box-sizing: border-box;
        position: sticky;
        top: 0;
        z-index: 2;
      }

      .list-item-content {
        width: 100%;
      }
    }
  }

  .list-anchor {
    width: max-content;
    height: max-content;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-right: 24rpx;
    z-index: 3;

    .list-anchor-item {
      width: 32rpx;
      height: 32rpx;
      border-radius: 50rpx;
      margin: 2rpx 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      line-height: 24rpx;
      color: #606266;
      transition: all 0.3s;
    }

    .list-anchor-item-active {
      background-color: #5677fc;
      color: #ffffff;
      transition: all 0.3s;
    }
  }
}
</style>
